{{define "title"}}
Project {{.Run.ID.LUCIProject}}
Run {{.Run.ID.Inner}}
- LUCI Change Verifier
{{end}}

{{define "head"}}
<style type="text/css">
  table td {
    padding: 2px 8px;
  }

  table td.long {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .collapsible {
    padding: 0 18px;
    display: none;
    overflow: hidden;
    background-color: #f1f1f1;
  }

  .clickable:hover {
    background-color: #ccc;
  }

  div.clickable {
    padding: 10px;
    border: 2px;
    border-color: black;
    font-weight: bold;
  }

  #full-details-panel {
    margin-left: 50px;
  }

  .tryjob-chips ul li {
    padding: 2px 4px;
    margin: 2px 4px;
  }

  .tryjob-chip {
    line-height: 2;
    white-space: nowrap;
    color: black;
    font-size: 90%;
    border: solid 1px rgba(0, 0, 0, 0.5);
    border-radius: 3px;
    padding: 2px 4px;
  }

  .tryjob-chip.highlight {
    box-shadow: gray 1.5px 1.5px 1px;
    text-decoration: underline;
    color: blue;
  }

  .tryjob-chip.highlight:visited {
    color: purple;
  }

  .tryjob-chip.unexpected {
    background: #f0f;
  }

  .tryjob-chip.not-started {
    background: #eee;
  }

  .tryjob-chip.running {
    background: #ff7;
  }

  .tryjob-chip.passed {
    background: #9e6;
    border-width: 3px;
  }

  .tryjob-chip.failed {
    background: #e88;
    border-width: 3px;
    border-style: dashed;
  }

   .reused{
    line-height: 2;
    white-space: nowrap;
    color: MidnightBlue;
    font-size: 90%;
    border: solid 1px MidnightBlue;
    border-radius: 3px;
    padding: 1px 1px;
    font-variant: small-caps;
    background: Azure;
    margin: 2px;
  }

  .message {
    overflow: auto;
    max-height: 250px;
    background-color: white;
    padding: 10px 50px;
  }

</style>
{{end}}

{{define "content"}}
{{$TJProgression := .TJProgression}}
{{$RelTime := .RelTime}}
{{$Tryjobs := .LatestTryjobs}}
{{$LogMessage := .LogMessage}}
<div class="container">
  <div>
    <h3>Run details</h3>
    {{template "runDetails" .Run}}
    {{$Created := .Run.CreateTime}}
  </div>

  <div>
    <h3>CLs</h3>
    <div class="container">
      <table class="table table-striped">
        <thead>
          <tr>
            <th style="width: 1%; white-space: nowrap;" class="text-center">
              Previous CV Run
            </th>
            <th style="width: 1%; white-space: nowrap;" class="text-center">
              CL
            </th>
            <th style="width: 1%; white-space: nowrap;" class="text-center">
              Next CV Run
            </th>
          </tr>
        </thead>
        <tbody>
          {{range .Cls}}
          <tr>
            <td style="white-space: nowrap;" class="text-center">
              {{with .Prev}}
              <a href="/ui/run/{{.}}">&lt; Previous</a>
              {{else}}
              <span style="color: #ccc;"> &mdash; </span>
              {{end}}
            </td>
            <td style="white-space: nowrap;" class="text-center">
              <a href="{{.URLWithPatchset}}">{{.ShortWithPatchset}}</a>
            </td>
            <td style="white-space: nowrap;" class="text-center">
              {{with .Next}}
              <a href="/ui/run/{{.}}">Next &gt;</a>
              {{else}}
              <span style="color: #ccc;"> &mdash; </span>
              {{end}}
            </td>
          </tr>
          {{end}}
        </tbody>
      </table>
    </div>
  </div>

  <div>
    <h3>Tryjobs</h3>
    {{if $Tryjobs}}
    <div>
      <p class="well">
        <b>NOTE</b> color codes represent how CV sees tryjobs, e.g.
        <span class="tryjob-chip running"><i>running</i></span>
        <span class="tryjob-chip failed"> <i>failed</i></span>
        <span class="tryjob-chip passed"> <i>succeeded</i></span>
        which isn't as granular as Buildbucket's statuses.
      </p>
      <p class="tryjob-chips">
        {{range $Tryjobs}}
        {{if .Link}}
        <a class="tryjob-chip {{.CSSClass}}" href="{{.Link}}">
          {{.Name}}
          {{if .Reused}}
            <span class="reused">reused</span>
           {{end}}
        </a>
        {{else}}
        <span class="tryjob-chip {{.CSSClass}}">
          {{.Name}}
          {{if .Reused}}
            <span class="reused">reused</span>
         {{end}}
        </span>
        {{end}}
        <span> </span>
        {{end}}
      </p>
    </div>
    {{else}}
    <span style="color: #ccc;">No tryjobs to show</span>
    {{end}}
  </div>

  <div>
    <h3>Logs</h3>
    {{if .Logs}}
    <table class="table table-striped">
      <thead>
        <th style="width: 200px;">Event</th>
        <th style="width: 250px;">Time</th>
        <th style="width: 100px;">&nbsp;</th>
        <th>&nbsp;</th>
      </thead>
      <tbody>
        {{range .Logs}}
        <tr class="log-entry{{if .HasTryjobChips}}-top{{end}}">
          <td><em>{{.EventType}}</em></td>
          <td style="white-space: nowrap;" class="unix-timestamp">{{.Time.Unix}}</td>
          <td style="white-space: nowrap;">{{call $RelTime .Time}} </td>
          <td>
            {{if .Message}}
            <div class="message">
              <pre>{{.Message}}</pre>
            </div>
            {{end}}
          </td>
        </tr>
        {{if .HasTryjobChips}}
        <tr class="log-entry-bottom">
          <td class="tryjob-chips" colspan="4">
            {{if .LegacyTryjobsByStatus}}
            <ul>
              {{range $label, $jobs := .LegacyTryjobsByStatus}}
              <li>{{$label}}:
                {{range $jobs}}
                {{if .Link}}
                <a class="tryjob-chip {{.CSSClass}}" href="{{.Link}}">
                    {{.Name}}
                    {{if .Reused}}
                      <span class="reused">reused</span>
                    {{end}}
                </a>
                {{else}}
                <span class="tryjob-chip {{.CSSClass}}">
                    {{.Name}}
                    {{if .Reused}}
                      <span class="reused">reused</span>
                    {{end}}
                </span>
                {{end}}
                <span> </span>
                {{end}}
              </li>
              {{end}}
            </ul>
            {{else}}
              {{range .Tryjobs}}
              {{if .Link}}
              <a class="tryjob-chip {{.CSSClass}}" href="{{.Link}}">
                {{.Name}}
                {{if .Reused}}
                  <span class="reused">reused</span>
                {{end}}
              </a>
              {{else}}
              <span class="tryjob-chip {{.CSSClass}}">
                {{.Name}}
                {{if .Reused}}
                  <span class="reused">reused</span>
                {{end}}
              </span>
              {{end}}
              {{end}}
            {{end}}
          </td>
        </tr>
        {{end}}
        {{end}}
      </tbody>
    </table>
    {{else}}
    <span style="color: #ccc;">No logs to show</span>
    {{end}}
  </div>
  {{end}}

  {{define "runDetails"}}
  <div>
    <table class="table run-details">
      <thead>
        <tr>
          <th style="width: 10%;">PROJECT</th>
          <th style="width: 25%;">ID</th>
          <th style="width: 10%;">MODE</th>
          <th style="width: 10%;">STATUS</th>
          <th>&nbsp;</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td><a href="/ui/recents/{{.ID.LUCIProject}}">
              {{.ID.LUCIProject}}
            </a></td>
          <td><b>{{.ID.Inner}}</b></td>
          <td>{{.Mode}}</td>
          <td>{{.Status}}</td>
          <td>
            <div id="run-details-expander" class="clickable"> (+) Show details</div>
            <div id="run-details-collapser" class="collapsible">(-) Hide details</div>
          </td>
        </tr>
      </tbody>
    </table>

    <div id="full-details-panel" class="collapsible well">
      <dl class="dl-horizontal">
        <dt>Eversion:</dt>
        <dd>{{.EVersion}}</dd>
        <dt>Id:</dt>
        <dd>{{.ID}}</dd>
        <dt>Mode:</dt>
        <dd>{{.Mode}}</dd>
        <dt>Status:</dt>
        <dd>{{.Status}}</dd>
        <dt>CreateTime:</dt>
        <dd class="unix-timestamp">{{.CreateTime.Unix}}</dd>
        <dt>StartTime:</dt>
        <dd class="unix-timestamp">
          {{if .StartTime.IsZero}}
          Not Started
          {{else}}
          {{.StartTime.Unix}}
          {{end}}
        </dd>
        <dt>UpdateTime:</dt>
        <dd class="unix-timestamp">
          {{if .UpdateTime.IsZero}}
          N/A
          {{else}}
          {{.UpdateTime.Unix}}
          {{end}}
        </dd>
        <dt>EndTime:</dt>
        <dd class="unix-timestamp">
          {{if .EndTime.IsZero}}
          N/A
          {{else}}
          {{.EndTime.Unix}}
          {{end}}
        </dd>
        <dt>Owner:</dt>
        <dd>{{.Owner}}</dd>
        <dt>ConfigGroupId:</dt>
        <dd>{{.ConfigGroupID}}</dd>
      </dl>
    </div>
  </div>
  {{template "collapserScript"}}
  {{end}}

  {{define "collapserScript"}}
  <script>
    var expander = document.getElementById("run-details-expander");
    var collapser = document.getElementById("run-details-collapser");
    var collapsible = document.getElementById("full-details-panel");

    function toggler() {
      collapsible.classList.toggle("collapsible");
      collapser.classList.toggle("collapsible")
      collapser.classList.toggle("clickable");
      expander.classList.toggle("collapsible")
      expander.classList.toggle("clickable");
    }

    expander.addEventListener("click", toggler);
    collapser.addEventListener("click", toggler);
  </script>
  {{end}}
